<template>
	<view class="mainpadding">
		<view class="flexbetween ssbox" style="background-color: #fff;">
			<view class="flexleft">
				<u-icon name="search" color="#999" size="20"></u-icon>
				<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords" confirm-type="search" @confirm="getleftList(keywords)">
			</view>
			<view class="rightss" @click="getleftList(keywords)">搜索</view>
		</view>
		<view class="flexcenter margin_top">
			<view :class="screentype==1?'itemboxs':'itembox'" style="border-radius: 50rpx 0 0 50rpx;" @click="changescreen(1)">按日查询</view>
			<view :class="screentype==2?'itemboxs':'itembox'" style="border-radius: 0 50rpx 50rpx 0;" @click="changescreen(2)">按月查询</view>
		</view>
		<view class="flexleft">
			<!-- 左侧 -->
			<view class="left_box">
				<view class="xiankuan2" :class="leftid==item.id?'xuanzbox':'weixbox'" v-for="item in leftList" :key="item.id" @click="changeleft(item)">{{item.nickname}}</view>
			</view>
			<!-- 右侧 -->
			<scroll-view scroll-y="true" @scrolltolower="onReachBottomt"
					refresher-threshold="100" class="rightbox">
				<view class="" v-for="item in rightList" :key="item.date">
					<view class="flexleft mainpadding2s" style="background-color: #3B50FF;border-radius: 0 20rpx 0 0;" v-if="screentype==1">
						<view class="titletext bold xiaobai">{{item.day}}日</view>
						<view class="xiaobai smalltext">{{item.mouth}}.{{item.year}}</view>
					</view>
					<view class="flexleft mainpadding2s" style="background-color: #3B50FF;border-radius: 0 20rpx 0 0;" v-if="screentype==2">
						<view class="titletext bold xiaobai">{{item.mouth}}月</view>
						<view class="xiaobai smalltext">{{item.year}}</view>
					</view>
					<view class="ffffff">
						<view class="mainpadding2s titletext xiaohei flexbetween" @click="zkitem(item)">
							<view class="">总交易金额</view>
							<view class="flexright">
								<view class="">{{item.total_jyprice}}元</view>
								<u-icon name="arrow-up" color="#999" size="16" v-if="!item.ischeck"></u-icon>
								<u-icon name="arrow-down" color="#999" size="16" v-if="item.ischeck"></u-icon>
							</view>
						</view>
						<template v-if="item.ischeck">
							<view class="mainpadding2s titletext xiaohei flexbetween">
								<view class="">易生</view>
								<view class="">{{item.total_jyprice}}元</view>
							</view>
							<view class="mainpadding2s titletext xiaohei flexbetween">
								<view class="">POS</view>
								<view class="xiaolan">{{item.pos_price}}元</view>
							</view>
							<view class="mainpadding2s titletext xiaohei flexbetween">
								<view class="">扫码</view>
								<view class="xiaolan">{{item.mp_price}}元</view>
							</view>
						</template>
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				keywords:"",
				leftList:[],
				leftid:"zyj",
				rightList:[],
				// 日期参数
				date:"",
				year:"",
				nowYear:"",
				month:"",
				screentype:1,// 筛选类型：1按日查询，2按月查询
			}
		},
		onLoad() {
			this.initdate()
			this.getleftList()
		},
		methods: {
			changescreen(val){
				if(val==this.screentype)return false
				this.screentype = val
				this.rightList = []
				if(this.screentype==1){
					this.initdate()
				}else{
					this.inityear()
				}
			},
			zkitem(item){
				this.rightList.forEach(current=>{
					if(item.date==current.date){
						current.ischeck = !current.ischeck
					}else{
						current.ischeck = false
					}
				})
			},
			getleftList(){
				httpRequest.request('/api/user/myTeamIndex', 'GET', {
					page:1,
					limit:200,
					username:this.keywords,
				}).then(res => {
					this.leftList = res.data.data
					this.leftList.unshift({
						id:"zyj",
						nickname:"总业绩"
					},{
						id:"gryj",
						nickname:"个人业绩"
					})
				})
			},
			changeleft(item){
				this.leftid = item.id
				this.rightList = []
				if(this.screentype==1){
					this.initdate()
				}else{
					this.inityear()
				}
			},
			async dayPosOrder(){
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				await httpRequest.request('/api/user/dayPosOrder', 'GET', {
					type:this.leftid=='gryj'?2:1,
					user_id:this.leftid=='gryj'?'':this.leftid=='zyj'?'':this.leftid,
					date:this.date,
				}).then(res => {
					uni.hideLoading()
					res.data.forEach(item=>{
						this.$set(item,"ischeck",false)
					})
					let arr = res.data.reverse()
					this.rightList = this.rightList.concat(arr)
				})
			},
			mouthPosOrder(){
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/user/mouthPosOrder', 'GET', {
					type:this.leftid=='gryj'?2:1,
					user_id:this.leftid=='gryj'?'':this.leftid=='zyj'?'':this.leftid,
					date:this.year,
				}).then(res => {
					uni.hideLoading()
					res.data.forEach(item=>{
						this.$set(item,"ischeck",false)
					})
					let arr = res.data.reverse()
					this.rightList = this.rightList.concat(arr)
				})
			},
			async initdate(){//初始化日期，获取当前月份
				let now = new Date();
				this.year = now.getFullYear();
				this.month = now.getMonth() + 1;
				this.nowYear = now.getFullYear();
				this.date = this.year + "-" +(this.month>9?this.month:"0"+this.month)
				await this.dayPosOrder()
				await this.onReachBottomt()
			},
			async inityear(){//初始化年份
				let now = new Date();
				this.year = now.getFullYear();
				this.nowYear = now.getFullYear();
				await this.mouthPosOrder()
				await this.onReachBottomt()
			},
			onReachBottomt(){
				if(this.screentype==1){
					this.month = this.month - 1;
					if (this.month == 0) {
						this.changeYearHandler(0)
						this.month = 12
					}
					this.date = this.year + '-' + (this.month>9?this.month:"0"+this.month)
					this.dayPosOrder()
				}else{
					this.changeYearHandler(0)
					this.mouthPosOrder()
				}
			},
			changeYearHandler(isAdd) {
				let year = isAdd ? this.year + 1 : this.year - 1;
				if (this.nowYear >= year) {
					this.year = year;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xiankuan2 {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		-webkit-line-clamp: 1; //行数
		line-clamp: 1;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
	}
	.itembox{
		padding: 15rpx 40rpx;
		color: #333333;
		font-size: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		border: 1rpx solid #3B50FF;
	}
	.itemboxs{
		box-sizing: border-box;
		padding: 15rpx 40rpx;
		color: #fff;
		font-size: 30rpx;
		background-color: #3B50FF;
		border: 1rpx solid #3B50FF;
	}
	.beijingse1 {
		background-color: #f5f5f5;
		min-height: calc(100vh - 60rpx);
		height: auto;
	}

	.weixbox {
		padding: 30rpx;
		font-size: 24rpx;
		background-color: #F9F9F9;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.xuanzbox {
		padding: 30rpx;
		border-left: 4rpx solid #3B50FF;
		font-size: 24rpx;
		background-color: #fff;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.rightbox {
		position: fixed;
		left: 175rpx;
		top: 300rpx;
		// padding: 5rpx 30rpx 30rpx;
		box-sizing: border-box;
		width: 74%;
		height: 80vh;
		background-color: #FFFFFF;
	}

	.left_box {
		position: fixed;
		left: 0;
		top: 300rpx;
		width: 23%;
		height: 80vh;
		overflow-y: auto;
		background: #F9F9F8;
		box-sizing: border-box;
	}
</style>
